<template>
  <div>
    <van-nav-bar
      title="城市列表"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- <van-index-bar
      highlight-color="#21b97a"
      v-for="(value, key) in obj"
      :key="key"
      :index-list="Object.keys(obj)"
    >
      <van-index-anchor :index="key">{{ key }}</van-index-anchor>
      <van-cell :title="item.label" v-for="item in value" :key="item.value" />
    </van-index-bar> -->
    <van-index-bar :index-list="indexList" highlight-color="#fff">
      <div v-for="(value, key) in allObj" :key="key">
        <van-index-anchor :index="key">
          <span v-if="key === '#'">当前城市</span>
          <span v-else-if="key === '热'">热门城市</span>
          <span v-else>{{ key }}</span>
        </van-index-anchor>
        <van-cell
          :title="item.label"
          v-for="item in value"
          :key="item.pinyin * 100"
          @click="fn(item)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { citylist, hotcity } from '@/api/index'
import { getCity, setCity } from '@/utils/storage'
export default {
  name: 'city-page',
  components: {},
  props: {},
  data() {
    return {
      indexList: [],
      allObj: {}
    }
  },
  watch: {},
  async created() {
    const res = await citylist({ level: 1 })
    // console.log(res.data.body)
    // this.arr = res.data.body
    const hot = await hotcity()
    // console.log(hot.data.body)
    const allObj = {
      '#': [
        getCity() || {
          label: '北京',
          value: 'AREA|88cff55c-aaa4-e2e0',
          pinyin: 'beijing',
          short: 'bj'
        }
      ],
      热: hot.data.body,
      A: [],
      B: [],
      C: [],
      D: [],
      E: [],
      F: [],
      G: [],
      H: [],
      I: [],
      J: [],
      K: [],
      L: [],
      M: [],
      N: [],
      O: [],
      P: [],
      Q: [],
      R: [],
      S: [],
      T: [],
      U: [],
      V: [],
      W: [],
      X: [],
      Y: [],
      Z: []
    }
    res.data.body.forEach((item) => {
      const key = item.short[0].toUpperCase()
      allObj[key].push(item)
    })
    // console.log(this.obj)
    for (const key in allObj) {
      if (allObj[key].length === 0) {
        delete allObj[key]
      }
    }
    this.indexList = Object.keys(allObj)
    this.allObj = allObj
  },
  methods: {
    onClickLeft() {
      this.$router.push('/')
    },
    fn(item) {
      setCity(item)
      this.$router.go(-1)
      // console.log(label)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon {
  color: white !important;
}
.van-cell::after {
  border-bottom: 1px solid rgb(225, 222, 222);
}
.van-cell {
  font-size: 17px;
}
::v-deep .van-index-bar__index {
  // position: absolute;
  line-height: 22px;
  font-size: 13px;
  box-sizing: border-box;
  // text-align: center;
  // transform: translateX(-50%);
  // padding: 0;
  // background-color: #21b97a;
  // background-size: 5px;
  // border-radius: 50% 50%;
}
::v-deep .van-index-bar__sidebar {
  transform: translateY(-45%);
}
::v-deep .van-nav-bar--fixed {
  z-index: 5;
}
::v-deep .van-index-anchor {
  color: #999;
}
::v-deep .van-index-bar__index--active {
  // display: inline-block;
  background-color: #21b97a;
  // position: relative;
  // transform: translateX(8px);
  // text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  padding-left: 5px;
  margin-left: 12px;
}
</style>
